<template>
	<view class="g-match-car u-list f-bc-whilte f-mb7">
		<view class="u-item f-mb10">
			<text class="key">订单类型</text>
			<text class="value">零售车订单</text>
		</view>
		<view class="u-item f-mb10">
			<text class="key">车辆名称</text>
			<text class="value">别克 威朗 2017款</text>
		</view>
		<view class="u-item f-mb10">
			<text class="key">外饰/内饰</text>
			<text class="value">黑色/灰色</text>
		</view>
		<view class="u-item f-mb10">
			<text class="key">数量</text>
			<text class="value">10/7</text>
		</view>
		<view class="u-item arrow" @tap="toMarchCarNum">
			<text class="key">选择车架号</text>
			<view class="f-f1"></view>
		</view>
		<view class="g-car-num f-fz14 f-fc-primary f-p10" :class="{ open: isOpen }">
			<view class="f-mb10">LSGUL83LXLA080505（西安仓）</view>
			<view class="f-mb10">LSGUL83LXLA080505（西安仓）</view>
			<view class="f-mb10">LSGUL83LXLA080505（西安仓）</view>
		</view>
		<view class="g-btn-view">
			<button class="u-btn f-fz12 f-fc-primary f-bdr-scircle" @tap="isOpen = !isOpen">收起</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isOpen: false
		};
	},
	methods: {
		toMarchCarNum() {
			uni.navigateTo({
				url: '/pages/output/matchCarNum'
			})
		}
	},
};
</script>

<style lang="scss" scoped>
.u-list {
	.u-item {
		height: auto;
		.key {
			color: #999999;
		}
	}
}
.g-car-num {
	margin: 20rpx 30rpx 0;
	background: #F5F5F5;
	max-height: 120rpx;
	overflow: hidden;
	transition: 0.3s all; 
}
.g-car-num.open {
	max-height: none;
}
.g-btn-view {
	padding: 30rpx 0;
	.u-btn {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		border: 1px solid #BFBFBF;
		margin: auto;
	}
}
</style>
